<template>
    <view class="page-content" style="background:#F6F6F6;">
        <navbar @clickLeft="toBack" fixed leftIcon="left" title="导入钱包" shadow></navbar>
		<view class="content-wrap m-t-25 p-l-30 p-r-30">
			<view class="import-pattern-wrap">
				<view class="import-tab">
					<view class="tab-item" :class="{active: selected == 1}" @tap="selectClick(1)">
						助记词导入
					</view>
					<view class="tab-item" :class="{active: selected == 2}" @tap="selectClick(2)">
						私钥导入
					</view>
				</view>
				<textarea class="import-content" v-model="mnemonic" placeholder="请输入助记词，用空格分隔"  v-show="selected == 1"/>
				<textarea class="import-content" v-model="privateKey" placeholder="请输入私钥"  v-show="selected == 2"/>
			</view>
			<view class="password-wrap">
				<input type="text" v-model="walletName"  placeholder="请输入钱包名称"  />
				<input type="password"  v-model="password" placeholder="请设置钱包密码（不少于6位）"  />
				<input type="password"  v-model="repeatPassword" placeholder="重复密码" />
			</view>
			<view class="tips success">
			    温馨提示：<br />
				<view class="break-word">神龙钱包不会储存用户密码，同时在用户本地也会严格加密防止第三方读取。</view>
			</view>
			<el-button @click="importWallet" class="btn-c" block style="border-radius: 12px !important;" type="primary">开始导入</el-button>
			<EasyDialog ref="EasyDialog"/>
		</view>
		<!--
        <view class="m-t-29 p-l-30 p-r-30">
            <view class="m-b-19 rel">
                <uni-easyinput type="textarea" autoHeight v-model="at" class="w338 bg-fff" placeholder="扫一扫或输入助记词 (用空格分离)、私钥、Keystore文件内容，请注意大小写"></uni-easyinput>
                <view class="w60 h25" style="border-radius:12px;background:#D6D6D7;position:absolute;color:#4D4D4D;bottom:14px;right:18px;font-size: 12px;display: flex;justify-content: center;align-items: center;">粘贴</view>
            </view>
            
            <view class="m-b-19">
                <view class="c_3c3 fz-16 m-b-13">钱包名称</view>
                <uni-easyinput v-model="walletPwd" placeholder="密码不少于8位数，请务必牢记" class="us-input"></uni-easyinput>
            </view>
            
            <view class="m-b-21">
                <view class="c_3c3 fz-16 m-b-13">钱包密码</view>
                <uni-easyinput v-model="pwdTips" placeholder="请输入密码，至少8位，请务必牢记" class="us-input" ></uni-easyinput>
                <uni-easyinput v-model="rePwd" placeholder="重复密码" class="us-input"></uni-easyinput>
            </view>
            
            <view class="m-b-19">
                <view class="c_3c3 fz-16 m-b-13">提示信息</view>
                <uni-easyinput v-model="walletPwd" placeholder="密码提示信息(可不填)" class="us-input"></uni-easyinput>
            </view>

            <label class="view flex-row align-center">
                <view class="m-r-8">
                    <radio  />
                </view>
                <view class="c_3c3">我已仔细阅读并同意<span style="color:#6781FF;">《用户协议》</span></view>
            </label>

            <el-button  class="btn-c" block style="border-radius: 12px !important;" type="primary">导入钱包</el-button>
        </view>
		-->
       

    </view>
</template>

<script>
import navbar from '@/components/uni-nav-bar'
import  uniEasyinput from '@/components/uni-easyinput/uni-easyinput'
import elButton from '@/components/el-button/el-button'
import noData from '@/components/noData/noData'
import sibList from '@/components/sib-list/sib-list.vue'


import { aboutWallet, formatMnemonicWords} from "@/common/businessCommon";
import { mapState, mapGetters } from 'vuex';
import EasyDialog from "@/components/EasyDialog";

export default {
    components: {
      navbar,
      uniEasyinput,
	  EasyDialog
	},
    data() {
        return {
        	selected: 1, //1是助记词导入， 2是私钥导入
        	mnemonic: '',
        	privateKey: '',
        	walletName: '',
        	password: '',
        	repeatPassword: ''
        }
    },
	computed: {
		...mapState(['walletList']),
		...mapGetters(['hasDefaultWallet']),
	},
	onLoad(option){
		if(option.privateKey){
			this.selected = 2;
			this.privateKey = option.privateKey;
		}
	},
	onShow() {
	  
	},
    methods: {
		selectClick(val) {
				this.selected = val
			},
			async importWallet(){
				console.log('walletList', this.walletList);
				if(this.selected == 1 && !this.mnemonic.trim()){
				  this.$showToast('请填写助记词');
				  return;
				}
				if(this.selected == 2 && !this.privateKey.trim()){
					this.$showToast('请填写私钥');
					return;
				}
		
				if(!this.walletName){
					this.$showToast('请填写钱包名称');
					return;
				}
				if(!this.password){
					this.$showToast('请设置钱包密码');
					return;
				}
				if(!this.repeatPassword){
					this.$showToast('请重复密码');
					return;
				}
		
				if(this.password !==this.repeatPassword){
					this.$showToast('两次密码输入的值不一致，请重新填写');
					this.password = '';
					this.repeatPassword = '';
					return;
				}
		
				uni.showLoading({
					title: '',
					mask: true,
				});
		
		
				let params;
				if(this.selected == 1){
					let mnemonic = formatMnemonicWords(this.mnemonic);
					params = {
						mnemonic,
						name: this.walletName,
					}
				}else{
					params = {
						privateKey: this.privateKey.trim().toLowerCase(),
						name: this.walletName
					}
				}
				let result = await aboutWallet.addNewWallet(params, this.password);
				uni.hideLoading();
		if(result.status === 1){
			/*createWallet({
				privateKey: result.privateKey
			}).then(res=>{
				console.log("创建钱包",res,result.privateKey);
			});*/
			if(this.hasDefaultWallet){
						this.$refs.EasyDialog.showDialog({
							title:'导入完成',
							text:'您的钱包已导入完成，现在可以使用了，快去看看吧',
							okText:'开始使用',
							cancelText:'暂时不用',
							ok: () => {
								setTimeout(() => {
									let address = this.walletList[this.walletList.length - 1].address;
									console.log('address', address);
									aboutWallet.setDefaultWallet(address);
									uni.reLaunch({
									    url: '/pages/home/index',
									});
								})
							},
							cancel: () => {
								uni.navigateBack();
							},
						});
					}else{
						console.log('walletList', this.walletList);
						setTimeout(() => {
							let address = this.walletList[0].address;
							aboutWallet.setDefaultWallet(address);
							uni.reLaunch({
							    url: '/pages/home/index',
							});
						})
						setTimeout(() => {
							uni.navigateBack();
						}, 1000)
					}
				}else{
		
					this.$showToast(result.msg);
				}
			},
			async searchCode(){
				let obj = await searchCode(1);
				this.privateKey = obj.privateKey;
			},
		toBack(){
			console.log('back');
			uni.navigateBack();
		}	
    }
    
};
</script>

<style lang="scss" scoped>
.bar1-title {
    color:#3C3C3C;
    font-size: 32rpx;
}

page {
    background: #F6F6F6;
}
.left-bar-item {width: 100%;height:68px;display: flex;align-items: center;justify-content: center;}
.left-bar-item .image{
    width:30px;
    height: 30px;
}
.left-bar-item.active {
    background: #F6F6F6;
}
.btn-c {
    display: block;
    margin-top:56rpx;
    width: 100%;
    height: 96rpx;
    line-height: 78rpx;
    font-size: 40rpx;
}
.fix-bottom {width: 100vw;height: 100px;background: #fff;bottom: 0;left: 0;padding-top:32rpx;position: fixed;}
.content-wrap {

		height: 100%;
		display: flex;
		flex-direction: column;
		padding: 0 32rpx;
		.import-pattern-wrap {
			// width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			margin-top: 20rpx;
			padding-top: 42rpx;
			padding-bottom: 38rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			.import-tab {
				display: flex;
				justify-content: space-around;
					align-items: center;
				width: 100%;
				.tab-item {
					min-width: 215rpx;
					min-height: 50rpx;

					display: flex;
					justify-content: center;
					align-items: center;
					color: #999999;
					font-size: 26rpx;
					line-height: 26rpx;
					border-radius: 25rpx;
					// padding: 10rpx;
				}
				.active {
					background-color: #6781FF;
					color: #FFFFFF;
					font-weight: 500;
				}
			}
			.import-content {
				height: 210rpx;
				margin-top: 54rpx;
				background-color: #F5F6F8;
				padding-top: 28rpx;
				padding-left: 32rpx;
				border-radius: 10rpx;
				.textarea-placeholder {
					color: #AAAAAA;
					font-size: 30rpx;
					font-weight: 300;
				}
			}
		}

		.password-wrap {
			background-color: #FFFFFF;
			border-radius: 20rpx;
			width: calc(100% - 68rpx);
			padding: 10rpx 34rpx;
			margin-top: 20rpx;
			input {
				padding: 32rpx 0;
			}
			input:not(:last-child) {
				border-bottom: 1px solid #DDDDDD;
			}
			.input-placeholder {
				color: #AAAAAA;
				font-size: 30rpx;
				font-weight: 400;
			}
		}
	}
</style>
